<template>




  <!--            筛选部分    ===================================================================================================================-->

  <div style="margin: 10px 0">
    <el-row :gutter="20" style="height: 35px">
      <el-col :span="8"></el-col>
      <el-col :span="8"><!-- 关键字 -->
        <el-input placeholder="请输入内容关键字" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.searchContent" clearable :prefix-icon="Search"></el-input>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>

    <div style="margin: 10px 0">
      <el-button class="el-icon-circle-plus-outline" type="primary" @click="getList(reqParam)">搜索</el-button>
      <el-button class="el-icon-circle-plus-outline" type="primary" @click="resetCondition()">重置筛选条件</el-button>
<!--      <el-button class="el-icon-circle-plus-outline" type="primary" @click="addNewPost()">发布商品</el-button>-->
      <el-button class="el-icon-circle-plus-outline" type="primary" @click="wait()">发布商品</el-button>
    </div>
  </div>

  <!--            数据展示部分    ===================================================================================================================-->

  <div>
    <ul>
      <li v-for="item in dataList" class="cardLi">
        <div class="cardBored">

          <el-row :gutter="20" style="height: 35px">
            <el-col :span="2">头像</el-col>
            <el-col :span="4">{{ item.creatorName }}</el-col>
            <el-col :span="2">
              <el-tag type="warning" size="default">
                {{ typeMap.get(item.type) }}
              </el-tag>
            </el-col>
            <el-col :span="14" style="float: right">
              <el-tag style="margin-left: 3px" v-for="tag in item.tagList" size="small" type="success">
                {{ tag.name }}
              </el-tag>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="height: 35px">
            <el-col :span="24">
              <a class="linkStyle" @click="toDetail(item.id)">
                {{ item.name }}
              </a>
            </el-col>

          </el-row>
          <el-row :gutter="20" style="height: 35px">
            <el-col :span="2"></el-col>
            <el-col :span="16">{{ getSimple(item.content) }}</el-col>
            <el-col :span="6">{{ item.gmtCreateTime }}</el-col>
          </el-row>

        </div>
      </li>
    </ul>
  </div>



  <el-container>
    <!--            分页工具    ===================================================================================================================-->
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="pageSizeList"
          :small="true"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float: right; margin-bottom: 10px"
          @size-change="handleSizeChange()"
          @current-change="handleCurrentChange()"
          hide-on-single-page
      />
    </div>
  </el-container>




</template>

<script setup>
import {getPostList, logicRemove} from "@/api/request";
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import router from "@/api/routerConfig";
import {ElMessage} from "element-plus";



const id = ref("")
const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const statusMap = ref(new Map([
  ['0', "待审核"],
  ['1', "在售"],
  ['2', "售罄"],
  ['3', "已下架"],
  ['4', "被屏蔽"]
]))

const tradeTypeMap = ref(new Map([
  ['0', "社区货币"],
  ['1', "微信"],
  ['2', "支付宝"],
  ['3', "物物交换"],
  ['4', "免费"],
  ['5', "自定义"]
]))

const typeMap = ref(new Map([
  ['1', "游戏账号"],
  ['2', "游戏装备"],
  ['3', "游戏外设"],
  ['4', "其他内容"]
]))


const reqParam = ref({
  pageNum: 1,
  pageSize: 20,
  searchContent:"",
  priceMin: '',
  priceMax: '',
  type: "",
  content: "",
  tradeType: ""
})


function handleSizeChange() {
  // 再次请求
  getList(reqParam.value)
}
function handleCurrentChange() {
  getList(reqParam.value)
}

async function getList(req) {
  req.pageSize = pageSize.value
  req.pageNum = pageNum.value
  req.status = 1
  let resp = await getPostList(req, "/commodity/list");
  console.log(resp)
  dataList.value = resp.list
  total.value = resp.total
}

function resetCondition() {
  reqParam.value = {
    id: "",
    title: "",
    type: "",
    content: "",
    tagIds: "",
    fileUrls: "",
    status: "",
    backReason: "",
    pageNum: 1,
    pageSize: 20,
    selectList: [],
    searchContent:"",
    creatorInfo: ""
  }
  getList(reqParam.value)
}

function addNewPost() {
  router.push({
    name: "commodityEdit",
    params: {}
  }, "/index")
}

function toDetail(index) {
  router.push({
    name: "commodityDetailWeb",
    params: {
      id: index
    }
  }, "/")
}

function handleEdit(index) {
  console.log(index)
  router.push({
    name: "commodityDetail",
    params: {
      id: index
    }
  })

}

async function handleDelete(index) {
  console.log(index)
  await logicRemove(index, "/commodity/remove")

}

const dataList = ref([])

function getSimple(req) {
  if (req != null && req.length > 20) {
    return req.substring(1, 20) + "........"
  }
  return req
}

function wait() {
  ElMessage.info("功能开发中，敬请期待....")
}

</script>




<style scoped>

.cardLi {
  list-style: none;
  height: auto;
}
.cardBored {
  background-color: gainsboro;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  height: auto;

}

.selectInput {
  margin: 10px;
  width: 100%;
  height: 65%;
}

.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-pagination-block +  {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

</style>